<script setup>

</script>

<template>
  <div class="shell">
    <ul class="nav">
      <li :class="{ active: $route.path === '/main/upload' }" id="logo">
        <router-link to="/main/upload">
          <div class="icon">
            <i class="iconfont icon-shangchuantupian"></i>
          </div>
          <div class="text">{{ $t("nav2") }}</div>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/main/history' }">
        <router-link to="/main/history">
          <div class="icon">
            <i class="iconfont icon-lishijilu"></i>
          </div>
          <div class="text">{{ $t("nav3") }}</div>
        </router-link>
      </li>
      <li :class="{ active: $route.path === '/main/chat' }">
        <router-link to="/main/chat">
          <div class="icon">
            <i class="iconfont icon-zhinengAI"></i>
          </div>
          <div class="text">{{ $t("nav4") }}</div>
        </router-link>
      </li>
      <li :class="{ active: $route.path.startsWith('/main/buy') }">
        <router-link to="/main/buy"> 
          <div class="icon">
            <i class="iconfont icon-remenhuodong"></i>
          </div>
          <div class="text">{{ $t("nav5") }}</div>
        </router-link>
      </li>
      <li :class="{ active: $route.path.startsWith('/main/settings') }">
        <router-link to="/main/settings">
          <div class="icon">
            <i class="iconfont icon-xiugaizhanghuxinxi"></i>
          </div>
          <div class="text">{{ $t("nav6") }}</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<style scoped>
@import url('//at.alicdn.com/t/c/font_4879401_t7ymc13hyfp.css');
@import url('@/assets/styles/leftNav.css');
</style>